<template>
  <div>
    <el-tabs v-model="current" tab-position="left">
      <el-tab-pane name="0" label="阿里云">
        <el-form ref="aliForm" :model="aliForm" :rules="aliRule" style="width: 80%; min-width: 800px"
                 label-width="140px">
          <el-form-item label="AppId" prop="appId">
            <el-input v-model="aliForm.paramMap.appId" autocomplete="off" placeholder="请输入AppId"></el-input>
          </el-form-item>
          <el-form-item prop="secretId">
            <template #label>
              AccessKey ID
              <el-tooltip placement="top">
                <div slot="content">
                  访问阿里云控制台获取：
                  <a target="aliyun" href="https://ram.console.aliyun.com/manage/ak">
                    https://ram.console.aliyun.com/manage/ak
                  </a>
                </div>
                <i class="el-icon-info"></i>
              </el-tooltip>
            </template>
            <el-input v-model="aliForm.paramMap.secretId" autocomplete="off"
                      placeholder="请输入AccessKey ID"></el-input>
          </el-form-item>
          <el-form-item label="AccessKey Secret" prop="secretKey">
            <el-input v-model="aliForm.paramMap.secretKey" autocomplete="off"
                      placeholder="请输入AccessKey Secret"></el-input>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane name="1" label="腾讯云">
        <el-form
            ref="tencentForm"
            :model="tencentForm"
            :rules="tencentRule"
            style="width: 80%; min-width: 800px"
            label-width="140px"
        >
          <el-tag
              :type="item.type"
              closable
              @close="onclose(index)"
              style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; margin-left: 25px; "
              v-for="(item, index) in tag"
              :key="index"
          >
            {{ item.text }}
          </el-tag>
          <el-form-item prop="appId">
            <template #label>
              AppId
              <el-tooltip placement="top">
                <div slot="content">
                  访问腾讯云控制台获取：
                  <a target="tencent" href="https://console.cloud.tencent.com/cam/capi">
                    https://console.cloud.tencent.com/cam/capi
                  </a>
                </div>
                <i class="el-icon-info"></i>
              </el-tooltip>
            </template>
            <el-input v-model="tencentForm.paramMap.appId" autocomplete="off" placeholder="请输入AppId"></el-input>
          </el-form-item>
          <el-form-item prop="secretId">
            <template #label>
              SecretId
              <el-tooltip placement="top">
                <div slot="content">
                  访问腾讯云控制台获取：
                  <a target="tencent" href="https://console.cloud.tencent.com/cam/capi">
                    https://console.cloud.tencent.com/cam/capi
                  </a>
                </div>
                <i class="el-icon-info"></i>
              </el-tooltip>
            </template>
            <el-input v-model="tencentForm.paramMap.secretId" autocomplete="off"
                      placeholder="请输入SecretId"></el-input>
          </el-form-item>
          <el-form-item label="SecretKey" prop="secretKey">
            <el-input v-model="tencentForm.paramMap.secretKey" autocomplete="off"
                      placeholder="请输入SecretKey"></el-input>
          </el-form-item>
          <el-form-item label="所属地域" prop="cosRegion">
            <el-input v-model="tencentForm.paramMap.cosRegion" autocomplete="off"
                      placeholder="请输入所属地域"></el-input>
          </el-form-item>
          <el-form-item label="存储桶名称" prop="bucketName">
            <el-input v-model="tencentForm.paramMap.bucketName" autocomplete="off"
                      placeholder="请输入存储桶名称"></el-input>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane name="2" label="Castle云">
        <el-form ref="castleForm" :model="castleForm" :rules="castleRule" style="width: 80%; min-width: 800px"
                 label-width="140px">
          <el-form-item prop="secretId">
            <template #label>
              SecretId
              <el-tooltip placement="top">
                <div slot="content">
                  访问Castle云控制台获取：
                  <a target="tencent" href="https://console.icuapi.com/secret">
                    https://console.icuapi.com/secret
                  </a>
                </div>
                <i class="el-icon-info"></i>
              </el-tooltip>
            </template>
            <el-input v-model="castleForm.paramMap.secretId" autocomplete="off" placeholder="请输入SecretId"></el-input>
          </el-form-item>
          <el-form-item label="SecretKey" prop="secretKey">
            <el-input v-model="castleForm.paramMap.secretKey" autocomplete="off"
                      placeholder="请输入SecretKey"></el-input>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane name="3" label="本地设置">
        <el-form ref="jcsegForm" :model="jcsegForm" :rules="jcsegRule" style="width: 80%; min-width: 800px"
                 label-width="140px">
          <el-form-item label="JCSEG字典位置" prop="folderPath">
            <el-input v-model="jcsegForm.paramMap.folderPath" autocomplete="off"
                      placeholder="请输入folderPath"></el-input>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
    <el-button type="primary" @click="onSubmit">保存</el-button>
  </div>
</template>

<script>
import request from "@/common/request"

export default {
  data() {
    return {
      current: "0",
      aliForm: {
        bindCode: "PLAT_ALI",
        bindDetail: "",
        groupCode: "",
        id: "",
        paramMap: {
          appId: "",
          secretId: "",
          secretKey: "",
        },
      },
      aliRule: {
        "paramMap.appId": [{required: true, message: "请输入AppId", trigger: "blur"}],
        "paramMap.secretId": [{required: true, message: "请输入AccessKey ID", trigger: "blur"}],
        "paramMap.secretKey": [{required: true, message: "请输入AccessKey Secret", trigger: "blur"}],
      },

      tencentForm: {
        bindCode: "PLAT_TENCENT",
        bindDetail: "",
        groupCode: "",
        id: "",
        paramMap: {
          appId: "",
          secretId: "",
          secretKey: "",
          cosRegion: "",
        },
      },
      tencentRule: {
        "paramMap.secretId": [{required: true, message: "请输入SecretId", trigger: "blur"}],
        "paramMap.secretKey": [{required: true, message: "请输入SecretKey", trigger: "blur"}],
        "paramMap.appId": [{required: true, message: "请输入AppId", trigger: "blur"}],
        "paramMap.cosRegion": [{required: true, message: "请输入所属地域", trigger: "blur"}],
        "paramMap.bucketName": [{required: true, message: "请输入存储桶名称", trigger: "blur"}],
      },

      castleForm: {
        bindCode: "PLAT_CASTLE",
        bindDetail: "",
        secretId: "",
        secretKey: "",
        groupCode: "",
        id: "",
        paramMap: {
          secretId: "",
          secretKey: "",
          folderPath: ""
        },
      },
      jcsegForm: {
        bindCode: "CODE_JCSEG",
        bindDetail: "",
        groupCode: "",
        id: "",
        paramMap: {
          folderPath: ""
        },
      },
      castleRule: {
        "paramMap.secretId": [{required: true, message: "请输入SecretId", trigger: "blur"}],
        "paramMap.secretKey": [{required: true, message: "请输入SecretKey", trigger: "blur"}],
      },
      jcsegRule: {
        "paramMap.folderPath": [{required: true, message: "请输入folderPath", trigger: "blur"}],
      },
      tag: [
        {
          type: "primary",
          text: "关键字提取、摘要提取、文本纠错基于腾讯云的 自然语言处理(NLP)，文本审核基于对象存储(OSS)",
        },
      ],
    }
  },
  created() {
    this.getData()
  },
  methods: {
    async getData() {
      const {data} = await request("get", "/system/configApi/list")

      const aliData = data.find(item => item.bindCode === "PLAT_ALI")
      const tencentData = data.find(item => item.bindCode === "PLAT_TENCENT")
      const castleData = data.find(item => item.bindCode === "PLAT_CASTLE")
      const jcsegData = data.find(item => item.bindCode === "CODE_JCSEG")

      if (aliData) {
        this.aliForm = {
          bindCode: "PLAT_ALI",
          bindDetail: aliData.bindDetail,
          groupCode: aliData.groupCode,
          id: aliData.id,
          paramMap: {
            appId: aliData.paramMap.appId,
            secretId: aliData.paramMap.secretId,
            secretKey: aliData.paramMap.secretKey,
          },
        }
      }
      if (tencentData) {
        this.tencentForm = {
          bindCode: "PLAT_TENCENT",
          bindDetail: tencentData.bindDetail,
          groupCode: tencentData.groupCode,
          id: tencentData.id,
          paramMap: {
            appId: tencentData.paramMap.appId,
            secretId: tencentData.paramMap.secretId,
            secretKey: tencentData.paramMap.secretKey,
            cosRegion: tencentData.paramMap.cosRegion,
            bucketName: tencentData.paramMap.bucketName,
          },
        }
      }
      if (castleData) {
        this.castleForm = {
          bindCode: "PLAT_CASTLE",
          bindDetail: castleData.bindDetail,
          groupCode: castleData.groupCode,
          id: castleData.id,
          paramMap: {
            secretId: castleData.paramMap.secretId,
            secretKey: castleData.paramMap.secretKey,
          },
        }
      }
      if (jcsegData) {
        this.jcsegForm = {
          bindCode: "CODE_JCSEG",
          bindDetail: jcsegData.bindDetail,
          groupCode: jcsegData.groupCode,
          id: jcsegData.id,
          paramMap: {
            folderPath: jcsegData.paramMap.folderPath,
          },
        }
      }
    },

    async onSubmit() {
      const refs = [this.$refs.aliForm, this.$refs.tencentForm, this.$refs.castleForm, this.$refs.jcsegForm]
      const formData = [this.aliForm, this.tencentForm, this.castleForm, this.jcsegForm][this.current]
      refs[this.current].validate(async valid => {
        if (valid) {
          formData.bindDetail = JSON.stringify(formData.paramMap)
          const {code, msg} = await request("post", "/system/configApi/edit", formData)
          if (code === 0) {
            this.$message.success("保存成功")
          } else {
            this.$message.error(msg)
          }
        }
      })
    },
  },
}
</script>

<style lang="scss" scoped></style>
